<template>
	<view class="ts-flex ts-column ts-flex-item" style="width: 100%;">

		<!-- 弹出窗口 -->
		<view class="mask" v-show="showMask" @click="hide"></view>
		<view class="popup" v-show="showState">
			<view class="ts-media-list">
				<image class="ts-media-list-logo" :src="item.img"></image>
				<view class="ts-media-list-body">
					<view class="ts-media-list-text-top ts-ellipsis-2">{{item.title}}</view>
					<view class="ts-media-list-text-middle">
						<view class="ts-flex ts-flex-item ts-flex-row" style="justify-content: space-between; align-items: center;">
							<text class="ts-h6">{{item.seller_count}}</text>
							<text class="ts-h6">库存剩{{item.stock}}件</text>
						</view>
					</view>
					<view class="ts-media-list-text-bottom">
						<view class="ts-flex ts-flex-item ts-flex-row" style="justify-content: space-between; align-items: center;">
							<view class="ts-flex ts-flex-item">
								<text class="ts-h4 ts-text-bold">￥{{item.price/100}}</text>
								<text class="ts-h4 ts-text-red ts-text-discount" style="padding-left: 10upx;">￥{{item.origin_price/100}}</text>
							</view>
							<view class="ts-flex ts-center">
								<view class="ts-numbox">
									<view class="ts-numbox-minus" @click="handleCount(-1)">-</view>
									<input class="ts-numbox-value" type="number" v-model="count" disabled>
									<view class="ts-numbox-plus" @click="handleCount(1)">+</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<button type="warn" style="width: 100%; background-color: #e31436; 	border-radius: 0upx; height: 100upx;" @click="addCart(item)">确定</button>
		</view>
		<view class="ts-row" style="position: fixed; top: 0; left: 0; height: 80upx; width: 100%; z-index: 1; background-color: #FFFFFF;">
			<ts-search-bar v-model="keywords" @search="search" placeholder="检索全部商品"></ts-search-bar>
		</view>
		<view class="ts-row" style="height: 80upx; width: 100%;"></view>



		<view class="ts-list">
			<view class="ts-list-cell" hover-class="ts-list-cell-hover" v-for="(item,index2) in searchResult" :key="index2">
				<view class="ts-media-list">
					<image class="ts-media-list-logo" :src="item.img" @tap="viewDetail(item.product_id)"></image>
					<view class="ts-media-list-body">
						<view class="ts-media-list-text-top ts-ellipsis-2" @tap="viewDetail(item.product_id)">{{item.title}}</view>
						<view class="ts-media-list-text-middle">
							<view class="ts-flex ts-flex-item ts-flex-row" style="justify-content: space-between; align-items: center;">
								<text class="ts-h6">{{item.seller_count}}</text>
								<text class="ts-h6">库存剩{{item.stock}}件</text>
							</view>
						</view>
						<view class="ts-media-list-text-bottom">
							<view class="ts-flex ts-flex-item ts-flex-row" style="justify-content: space-between; align-items: center;">
								<view class="ts-flex ts-flex-item">
									<text class="ts-h4 ts-text-bold">￥{{item.price/100}}</text>
									<text class="ts-h4 ts-text-red ts-text-discount" style="padding-left: 10px;">￥{{item.origin_price/100}}</text>
									<!-- <text class="ts-badge ts-badge-danger">爆款</text> -->
								</view>
								<view class="ts-flex">
									<!-- <button  type="warn" size="mini" @click="show(item)">立即购买</button> -->
									<ts-button type="danger" @tap="show(item)"><text>立即购买</text></ts-button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="ts-column">
			<ts-load-more :loadingType="loadingType" :contentText="contentText" @tap="loadMoreSearchResult"></ts-load-more>
		</view>

		<view class="cart" @tap="gotoCart">
			<image src="../../../static/cart.png" />
			<text v-show="countAll>0" class="ts-badge ts-badge-danger">{{countAll}}</text>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'


	export default {
		data() {
			return {
				showMask: false,
				showState: false,


				searchResult: [],
				loadingType: 0, //上拉的状态：0-loading前；1-loading中；2-没有更多了
				page: 0,

				item: {
					stock: 0,
					seller_count: 0,
					title: '',
					img: '',
					product_id: 0,
				},
				count: 1, //购买的数量

				store_id: 0,
				keywords: '水果', //检索关键词
			}
		},
		computed: {
			cartList() {
				return this.$store.getters.cartList;
			},
			countAll() {
				let count = 0;
				this.cartList.forEach(item => {
					if (item.checked) {
						count += item.count;
					}
				});
				return count;
			},
		},
		onLoad: function(e) {
			console.log(JSON.stringify(e)); //id=1
			this.store_id = e.store_id || 0;
			this.init(); //必须等待初始化完成
			//每一个分类加载一页数据
			this.loadMoreSearchResult();

		},

		onReachBottom: function() {
			this.loadMoreSearchResult();
		},
		methods: {
			loadMoreSearchResult() {
				//上拉的状态：0-loading前；1-loading中；2-没有更多了
				if (this.loadingType !== 0) {
					return;
				}
				this.loadingType = 1;
				this.page = this.page + 1;

				uni.request({
					url: this.$API_BASE + `/app/store/searchProduct`,
					method: 'GET',
					dataType: 'json',
					data: {
						store_id: this.store_id, //在指定的店内搜索
						keywords: this.keywords,
					},
					success: (response) => {
						const res = response.data;
						if (res.success) {
							const data = res.data;
							if (data) {
								this.searchResult = this.searchResult.concat(data);
							}
							if (res.has_more === false) {
								this.loadingType = 2; //2-没有更多了
							} else {
								this.loadingType = 0; //开启新一轮加载
							}
						} else {
							console.log(res.message);
						}
					}
				});
			},
			addCart: function(item) {
				this.hide();
				this.$store.commit('addCart', {
					value: this.item,
					count: this.count,
				});
			},
			show(item) {
				this.count = 1;

				this.item = item;
				this.showMask = true;
				this.showState = true;
			},
			hide() {
				this.showMask = false
				this.showState = false
			},
			gotoCart() {
				uni.navigateTo({
					url: '/pages/my/shopingcart/index'
				});
			},
			viewDetail(product_id) {
				uni.navigateTo({
					url: `detail?product_id=${product_id}`
				})
			},

			init: function() {
				this.showMask = false;
				this.showState = false;

				this.searchResult = [];
				this.page = 0;
				this.loadingType=0;

				this.item = {
					stock: 0,
					seller_count: 0,
					title: '',
					img: '',
					product_id: 0,
				};
				this.count = 1; //购买的数量
			},
			handleCount(count) {
				if (count < 0 && this.count === 1) {
					uni.showModal({
						title: '提示',
						content: '最少要选择一件商品，确定放弃购买吗？',
						success: function(res) {
							if (res.confirm) {
								self.hide();
								return;
							} else if (res.cancel) {
								return;
							}
						}
					});
				} else {
					this.count += count;
				}
			},
			search() {
				//开启新的搜索，需要清除之前的搜索结果
				this.init();
				this.loadMoreSearchResult();
			}
		},
		components: {

		}
	}
</script>


<style>
	page,
	view {
		display: flex;
		flex-direction: row;
	}

	page {
		min-height: 100%;
		font-size: 28upx;
	}


	.loadMore {
		width: 100%;
		text-align: center;
		justify-content: center;
		line-height: 100upx;
		font-size: 30upx;
	}

	.ts-media-list-logo {
		height: 200upx;
		width: 200upx;
		margin-right: 20upx;
	}

	.ts-media-list-body {
		height: 200upx;
		display: flex;
		flex: 1;
		flex-direction: column;
	}

	.ts-media-list-text-top {
		font-size: 25upx;
		line-height: 30upx;
		height: 60upx;
	}

	.ts-media-list-text-middle {
		font-size: 20upx;
		width: 100%;
	}

	.ts-media-list-text-bottom {
		font-size: 20upx;
		color: #8f8f94;
		width: 100%;
	}


	.cart {
		position: fixed;
		display: flex;
		z-index: 997;
		bottom: 50upx;
		right: 50upx;
		width: 100upx;
		height: 100upx;
		/* border:
1px solid #dddddd; */
		border-radius: 100upx;
		margin: 0 40upx;
		background-color: #FFB400;
	}

	.cart image {
		width: 60upx;
		height: 60upx;
		margin: 20upx;
	}

	.cart text {
		position: fixed;
		bottom: 100upx;
		right: 100upx;
	}

	.mask {
		position: fixed;
		z-index: 998;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, .3);
	}

	.popup {
		position: fixed;
		display: flex;
		flex-direction: column;
		flex: 1;
		z-index: 999;
		background-color: #ffffff;
		-webkit-box-shadow: 0 0 30px rgba(0, 0, 0, .1);
		box-shadow: 0 0 30upx rgba(0, 0, 0, .1);
		bottom: 0;
		width: 100%;
	}


	.ts-numbox {
		display: flex;
		flex-direction: row;
		height: 50px;
		align-items: center;
		justify-content: center;
	}

	.ts-numbox-minus,
	.ts-numbox-plus {
		margin: 0;
		background-color: #f9f9f9;
		width: 50upx;
		line-height: 50upx;
		justify-content: center;
		align-items: center;
		color: #555555;
		font-size: 24upx;
		border: 0upx;
	}

	.ts-numbox-value {
		border: 0upx;
		width: 100upx;
		font-size: 24upx;
		text-align: center;
	}

	.ts-numbox-disabled {
		color: #c0c0c0;
	}
</style>
